<template>
	<view class="jk-page-container bg">
		<jkSearchBar :search-val.sync="searchParams.machineNameOrCode" :searchLeftItemName="searchParams.workshopName"
			:searchRightItemName="searchParams.processName" placeholder="设备编号" @search="onSearchBtn"
			@search-left-item="onClickWorkshop" @search-right-item="onProcessChange"
        ></jkSearchBar>
		<view class="column-list-container">
			<view v-for="(item, index) in tableData" :key="index" class="column-list-item">
				<view class="column-list-item-default flex-between-center">
					<view class="flex-start-center">
						<view class="column-list-item-title">{{ item.machineCode || '暂无' }}</view>
						<!--<open-state-bar :status="item.openingState"></open-state-bar>-->
					</view>
					<view class="column-list-item-sub-title">
						<u-button size="mini" type="text">标为已读</u-button>
                    </view>
				</view>
                <view class="column-list-item-default column-list-item-sub-title">预警项目：{{ '罗拉转速' }}</view>
                <view class="column-list-item-default column-list-item-sub-title">参考标准：{{ '12<22<28' }}</view>
                <view class="column-list-item-default column-list-item-sub-title">当前数值：{{ '33' }}</view>
                <view class="column-list-item-default column-list-item-sub-title">工艺单号：{{ item.productOrderCode || '暂无' }}</view>
                <view class="column-list-item-default column-list-item-sub-title">生产品种：{{ item.productName || '暂无' }}</view>
                <view class="column-list-item-default column-list-item-sub-title">告警时间：{{ '2023-08-21 10:21:22' }}</view>
				<view style="font-weight: 300;">
					<!--<u-button @click="onToCloseBtn(item)" type="text" size="normal">了机</u-button>-->
				</view>
                <view style="position:absolute;left: 30rpx;top: 50%;margin-top: -21px;background: #f8f8f9;border-radius: 8rpx;">
                    <u-icon name="warning" size="42" color="#ed4014"></u-icon>
                </view>

            </view>
			<jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
		</view>
        <jk-popup :show="showProcessPopup" title="工序" @close="onCloseProcessPopup">
            <view
                v-for="item in processList"
                :key="item.processName"
                @click="onSelectProcessChange(item)"
                style="height: 84rpx;display: flex;justify-content: center;align-items: center;font-size: 28rpx;border-bottom: solid 1rpx #eee;"
            >{{ item.processName }}</view>
        </jk-popup>
	</view>
</template>

<script>
    import {
        productionPrdNoticeMachineClearOpeningOpening,
        spinProcessPage, spinSpecSheetTaskPage,
        systemAuthGetPermissionInfo,
    } from "../../../api";
	import {
		isLastPage,
		pageConfig,
		showLoading
	} from "../../../utils/jk-utils";
	import loadingMore from '../../../mixins/loading-more';
	import jkNoMore from "../../../jk-components/jk-no-more";
	import jkSearchBar from "../../../jk-components/jk-search-bar";
    import jkPopup from "../../../jk-components/jk-popup";
	export default {
		mixins: [loadingMore],
		components: {
            jkPopup,
            jkNoMore,
			jkSearchBar
		},
		data() {
			return {
				apiConfig: {
					list: spinSpecSheetTaskPage
				},
                showProcessPopup: false,
				searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					workshopId: null,
					workshopName: '',
                    machineNameOrCode: '',
                    processCodes: '',
					processName: '',
                    auditState: 0
				},
				tableData: [],
				workshopList: [],
				processList: []
			}
		},
		onLoad() {
		},
		onShow() {
            this.processList = getApp().globalData.defaultProcess.list;
            this.processList.unshift({processCode: '', processName: '查看全部'})
            this.$set(this.searchParams, 'processCodes', getApp().globalData.defaultProcess.list.map(x => x.processCode).join());
            this.getDependentData();
		},
		methods: {
			onCancelBtn(item) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: "确定'取消开台'吗?",
					success: function(res) {
						if (res.confirm) {
							productionPrdNoticeMachineClearOpeningOpening({}, {
								prdNoticeMachineChangeId: item.id
							}).then(res => {
								if (res.data.status === 200) {
									_this.getListRequest();
								}
							});
						}
					}
				});
			},
            onSelectProcessChange(item) {
			    if (!item.processCode) {
                    this.$set(this.searchParams, 'processCodes', this.processList.map(x => x.processCode).join());
                    this.$set(this.searchParams, 'processName', '全部工序');
                } else {
                    this.$set(this.searchParams, 'processCodes', item.processCode);
                    this.$set(this.searchParams, 'processName', item.processName);
                }
                this.showProcessPopup = false;
                this.getListRequest();
            },
            onCloseProcessPopup() {
                this.showProcessPopup = false;
            },
            onProcessChange() {
                this.showProcessPopup = true;
            },
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'machineNameOrCode', '');
				this.onSearchBtn();
			},
			onToCloseBtn({
				id
			}) {
				uni.navigateTo({
					url: `/pages/production/closeMachine/toClose?id=${ id }`
				})
			},
			onSearchBtn(e) {
				this.tableData = [];
				this.$set(this.searchParams, 'machineNameOrCode', e);
				this.getListRequest();
			},
			getProcessListRequest() {
				return spinProcessPage({
					auditState: 1
				}).then(res => {
					if (res.data.status === 200) {
						let item = res.data.res.find(x => x.code.toUpperCase() === 'XS');
						if (item) {
							this.$set(this.searchParams, 'processCode', item.code);
							this.$set(this.searchParams, 'processName', item.name);
						}
						this.processList = res.data.res;
					}
				});
			},
			getWorkshopDataRequest() {
				return systemAuthGetPermissionInfo().then(res => {
					if (res.data.status === 200) {
						if (!this.searchParams.workshopId) {
							this.$set(this.searchParams, 'workshopId', res.data.res.workshop.defaultWorkshopId);
							this.$set(this.searchParams, 'workshopName', res.data.res.workshop.defaultWorkshopName);
						}
						this.workshopList = getApp().globalData.defaultWorkshop.list;
					}
				})
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				await this.getWorkshopDataRequest();
				if (this.searchParams.workshopId) await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				if (this.searchParams.workshopId) {
					showLoading(true);
					this.searchParams.pageNo = 1;
					let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopName;
                    delete params.processName;
                    delete params.totalCount;
                    return this.apiConfig.list(params).then(res => {
						showLoading(false);
						if (res.data.status === 200) {
							this.$set(this.searchParams, 'totalCount', res.data.count);
                            this.tableData = res.data.res;
							this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
						}
					})
				}
			},
			onClickWorkshop() {
				let _this = this;
				uni.showActionSheet({
					itemList: _this.workshopList.map(x => x.workshopName),
					success(res) {
						_this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
						_this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex]
							.workshopName);
						_this.getListRequest();
					}
				});
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
